<template>
  <div>
    <!-- 这里不能用v-model，因为子不能改父的数据，只能拆开用@input把数据回传给父 -->
    <input type="text" :value="value" @input="handleInput" />
  </div>
</template>
<script>
export default {
  name: "el-input",
  props: {
    value: String,
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
      //this.$parent拿到父组件   this.$el.parentNode拿到父dom
      let parent = this.$parent;
      while (parent) {
        let name = parent.$options.name;
        if (name === "el-form-item") {
          break; //找到了
        } else {
          parent = parent.$parent; //没找到继续向上找
        }
      }
      if (parent) {
        parent.$emit("validate"); //发布订阅，触发校验事件
      }

      // 也可以用自定义方法
      // this.$dispatch('validate','el-form-item')
    },
  },
};
</script>